.box {
    display: flex;
    width: 800px;
    height: 450px;
    margin: 100px auto 0 auto;
    transform: perspective(3200px);
    // transform-style: preserve-3d;
}
.carousel {
    // float: left;
    position: relative;
    transform-style: preserve-3d;
    flex: 1;
    // width: 1%;
    height: 100%;
    // transition: all .6s ease-in-out 0s;
    // &:hover {
    //     transform: rotateX(-360deg);
    // }
    each(range(100), {
        &:nth-of-type(@{value}) {
            transition: all .8s ease-in-out ((@value - 1) * 0.001s);
            div.carousel-item {
                background-position:(-(@value - 1) * 8px) 0;
            }
        }
    });
    .carousel-item {
        position: absolute;
        width: 100%;
        height: 100%;
        &:nth-of-type(1) {
            transform: translateZ(225px);
            background: url(../image/1.jfif) no-repeat;
            background-size: cover;
            // animation: 2s nextFlip2 infinite;
        }
        &:nth-of-type(2) {
            transform: translateY(-225px) rotateX(90deg);
            background: url(../image/2.jfif) no-repeat;
            background-size: cover;
        }
        &:nth-of-type(3) {
            transform: translateZ(-225px) rotateX(180deg);
            background: url(../image/3.jfif) no-repeat;
            background-size: cover;
        }
        &:nth-of-type(4) {
            transform: translateY(225px) rotateX(-90deg);
            background: url(../image/4.jfif) no-repeat;
            background-size: cover;
        }
    }
    
}
.next {
    width: 80px;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
}
@keyframes nextFlip2 {
    0% {
    //   background-image: url("https://picsum.photos/420/300?random=1");
    //   background-position: -148px -2px;
      transform: rotateY(0deg);
    }
    10.5% {
    //   background-image: url("https://picsum.photos/420/300?random=2");
    //   background-position: -238px -2px;
      transform: rotateY(180deg);
    }
    20% {
    //   background-image: url("https://picsum.photos/420/300?random=2");
    //   background-position: -148px -2px;
      transform: rotateY(0deg);
    }
    30.5% {
    //   background-image: url("https://picsum.photos/420/300?random=3");
    //   background-position: -238px -2px;
      transform: rotateY(180deg);
    }
    40% {
    //   background-image: url("https://picsum.photos/420/300?random=3");
    //   background-position: -148px -2px;
      transform: rotateY(0deg);
    }
    50.5% {
    //   background-image: url("https://picsum.photos/420/300?random=4");
    //   background-position: -238px -2px;
      transform: rotateY(180deg);
    }
    60% {
    //   background-image: url("https://picsum.photos/420/300?random=4");
    //   background-position: -148px -2px;
      transform: rotateY(0deg);
    }
    70.5% {
    //   background-image: url("https://picsum.photos/420/300?random=5");
    //   background-position: -238px -2px;
      transform: rotateY(180deg);
    }
    80% {
    //   background-image: url("https://picsum.photos/420/300?random=5");
    //   background-position: -148px -2px;
      transform: rotateY(0deg);
    }
    90.5% {
    //   background-image: url("https://picsum.photos/420/300?random=1");
    //   background-position: -238px -2px;
      transform: rotateY(180deg);
    }
  }